<template>
<!-- 搜索栏 -->
 <div class="box">
    <div class="search">
    <van-search
    class="van-search"
      v-model="value"
      shape="round"
      background="#fff"
      color="#c1ab96"
      placeholder="ins风配饰"
    />
    <ul class="sousuo"></ul>
    <span
    class="sou"
    @click="jumpToDiscount()"
    >搜索</span>
  </div>

    <!-- 历史搜索 -->
  <div class="history">
      <h3>历史搜索</h3>
      <div class="small-tags">
        <span class="tags" v-for="tag in history" :key="tag" @click="jumpToDiscount()">{{ tag }}</span>
      </div>
  </div>

  <!-- 搜索发现 -->
  <div class="found">
      <h3>搜索发现</h3>
      <div class="small-tags">
      <span class="tags" v-for="tag in found" :key="tag" @click="jumpToDiscount()">{{ tag }}</span>
    </div>
  </div>
 </div>
  </template>

<script>
export default {
  name: 'Search',
  data() {
    return {
      value: '',
      show: false,
      history: ['宽松', '简约', 'ins风', '优衣库', '宜家', '北欧风格', '瑞士', '纯白色', '高冷'],
      found: ['简约男装', '修身款', '水果茶自制', '简约风格', '冷淡', '上衣', '森系', '情侣'],
    }
  },
  methods: {
    // 跳转到限时折扣页面
    jumpToDiscount() {
      this.$router.push('/discount/')
    },
  },
}
</script>

<style lang="less" scoped>
.search{
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .van-search{
    flex: 1;
  }
  .sou{
    border:1px solid #c1ab96;
     border-radius: 15px;
     width: 100px;
     color: white;
     text-align: center;
     font-size: 14px;
     margin-left: 10px;
     background: #c1ab96;
  }
}
h3{
  font-size: 15px;
  color: #333333;
  margin:50px
}
.small-tags{
  display: flex;
  height: 200px;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-bottom: 50px;
  .tags{
      font-size: 13px;
      background: #f8e6d3;
      color: white;
      border-radius: 15px;
      padding: 7px 28px;
      margin: 10px 10px;
}
}
.box{
  width: 95%;
}
</style>
